<template>
	<view class="container_135">
		<view class="top_image">
			<image src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/lhhy/sh30/sh30.jpg" style="width: 750rpx" mode="widthFix"></image>
		</view>
		<view class="form-container">
			<uni-forms class="forms-item" ref="accountForm" :model="formData">
				<uni-forms-item>
					<input
						style="width: 600rpx"
						maxlength="11"
						placeholder="请输入手机号"
						type="tel"
						v-model="formData.mobile"
						class="uni-input-input"
						placeholder-style="color: #969696;font-size:40rpx"
					/>
				</uni-forms-item>

			
				<view class="login-btn" style="text-align: center">
					<!-- <image src="/static/lh/sh/confirm.png" mode="widthFix" style="width: 600rpx" @click="submitform"></image> -->
					<image @click="confirmOrder" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/lhhy/sh30/bt.png" mode="widthFix"></image>
				</view>
				<view style="margin-top: 20rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
							<text style="color: #ffffff; font-weight: 400; font-size: 24rpx">已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #fffcb0; font-weight: 600" @click="privatePro(1)">《隐私政策》</text>
					<text style="color: #fffcb0; font-weight: 600" @click="privatePro(2524)">《产品说明》</text>
				</view>
			</uni-forms>
			
	<!-- 		<view class="image login-btn">
				<template v-if="userInfo.info.mobile">
					<image @click="confirmOrder" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/lhhy/sh30/bt.png" mode="widthFix"></image>
				</template>

				
			</view> -->
<!-- 			<view class="agree-container">
				<checkbox-group @change="changeAll">
					<label>
						<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
						<text style="color: #000; font-weight: 400; font-size: 26rpx">已阅读并同意</text>
					</label>
				</checkbox-group>
				<view class="">
					<text style="color: #2677d1; font-weight: 400; font-size: 28rpx" @click="privatePro(1)">《用户协议》</text>
					<text style="color: #2677d1; font-weight: 400; font-size: 28rpx" @click="privatePro(30)">《活动规则》</text>
				</view>
			</view> -->
		</view>
		<uni-popup ref="popupPro" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
		<view class="arrive-btn" :style="{ display: showHeight > 500 ? '' : 'none' }">
			<image @click="toTop" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/lhhy/sh30/bt.png" mode="widthFix"></image>
		</view>
		<view class="fixed-1" @click="privatePro(30)">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/rule.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-2" @click="receiveEquity">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/link.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-3" @click="phone">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/phone.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, onMounted, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import initApi from '@/apis/init.js';
import { storeToRefs } from 'pinia';
import { constStore } from '@/store/const.js';
import { useUserStore } from '@/store/user.js';
import { getALPhoneNumber, getWXphoneNumber, uuIds } from '@/utils/login.js';
const { userInfo } = storeToRefs(useUserStore());
const { constInfo } = constStore();
/* 协议 */
const popupPro = ref();
const agreeType = ref(1);
const allChecked = ref();
const showHeight = ref(0);
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: ''
});
const receiveEquity = () => {
	uni.navigateTo({
		url: `/pages/lhhy/equity`
	});
};
onLoad(() => {
	// 获取用户的登录信息
	// #ifdef MP-ALIPAY
	// getALPhoneNumber();
	// #endif

	// #ifdef MP-WEIXIN
	// getWXphoneNumber();
	// #endif
});
const onGetPhoneNumber = (e) => {
	console.log(e, 'eeeee');
	const {
		detail: { encryptedData, iv, code }
	} = e;
	const params = {
		appId: 'wxd288833c4af82e86',
		code
	};
	initApi.getWXAuthor(params).then((res) => {
		console.log(res,'自己手动获取手机号');
		if (res.code == 20000) {
			if (res.data.accessToken) {
				uni.setStorageSync('token', res.data.accessToken);
				userInfo.value.token = res.data.accessToken;
				formData.mobile = res.data.mobile;
				userInfo.value.mobile = res.data.mobile;
			}
			// 下单
			confirmOrder();
		}
	});
};
const confirmOrder = () => {
	console.log('提交订单', uuIds());
	const arr = {
		productCode: 'LH2525',
		channelCode: '4zw8ad3377b54ea8ba7cda02d2194zw8',
		mobile: formData.mobile ? formData.mobile : userInfo.value.info.mobile,
		orderType: 2,
		paymentMethod: 2,
		uniqueUserId: '',
		uuid: uuIds()
	};
	initApi.associateMemberSign(arr).then((res) => {
		console.log(res, 'uuiduuid');
		if (res.code == 20000) {
			handleJumpPaySign(res.data);
		}else{
			return uni.utils.toast(res.message);
		}
	});
};
/* 微信签约 */
const handleJumpPaySign = (query) => {
	wx.navigateToMiniProgram({
		appId: 'wxbd687630cd02ce1d', // 第三方
		// path: 'pages/lhhy/sh30/index',
		extraData: query.extInfo,
		success(res) {
			// 成功跳转到签约小程序
			return uni.utils.toast('签约成功');
		},
		fail(res) {
			// 未成功跳转到签约小程序
			return uni.utils.toast('签约失败');
		}
	});
};
const ok1 = () => {
	popupPro.value.close();
	allChecked.value = true;
};
const phone = () => {
	uni.makePhoneCall({
		phoneNumber: '400-8825101' //客服
	});
};

onPageScroll((e) => {
	showHeight.value = e.scrollTop;
});
const toTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};

const privatePro = (type) => {
	agreeType.value = type;
	popupPro.value.open('center');
};

const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
</script>

<style scoped lang="scss">
.container_135 {
	width: 750rpx;
	height: 100%;
	background-color: #f23a47;
	margin: 0 auto;
	.form-container {
	
	
	}
}
::v-deep {
	image {
		vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
	}
}
:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}
.wx-button {
	background-color: #409eff;
	width: 500rpx;
}
</style>
